<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>学习笔记网站</title>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            color: #333;
        }

        /* 动画关键帧 */
        @keyframes slideDown {
            from {
                transform: translateY(-100%);
            }
            to {
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 导航栏样式 */
        nav {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: slideDown 0.5s ease-out;
        }

        .nav-logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #1890ff;
        }

        .nav-menu {
            display: flex;
            gap: 1.5rem;
        }

        .nav-menu a {
            color: #333;
            transition: color 0.3s ease;
        }

        .nav-menu a:hover {
            color: #1890ff;
        }

        /* 英雄部分样式 */
       .hero {
            background-color: #fff;
            padding: 8rem 2rem;
            text-align: center;
            margin-top: 4rem;
            animation: fadeIn 1s ease-out;
        }

       .hero-title {
            font-size: 3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
        }

       .hero-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
        }

       .hero-button {
            background-color: #1890ff;
            color: #fff;
            padding: 0.8rem 2rem;
            border-radius: 4px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            display: inline-block;
        }

       .hero-button:hover {
            background-color: #40a9ff;
        }

        /* 特色部分样式 */
       .features {
            padding: 6rem 2rem;
            background-color: #f0f2f5;
        }

       .feature-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            justify-items: center;
        }

       .feature {
            background-color: #fff;
            padding: 2rem;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
            animation: fadeIn 1s ease-out;
        }

       .feature:hover {
            transform: translateY(-5px);
        }

       .feature-icon {
            font-size: 2.5rem;
            color: #1890ff;
            margin-bottom: 1rem;
        }

       .feature-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
        }

       .feature-description {
            font-size: 1rem;
            color: #666;
        }

        /* 页脚样式 */
        footer {
            background-color: #fff;
            padding: 2rem;
            text-align: center;
            border-top: 1px solid #e8e8e8;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <div class="nav-logo">学习笔记</div>
        <div class="nav-menu">
            <a href="#">首页</a>
            <a href="#">笔记分类</a>
            <a href="#">热门笔记</a>
            <a href="#">关于我们</a>
        </div>
    </nav>

    <!-- 英雄部分 -->
    <section class="hero">
        <h1 class="hero-title">高效学习，从记录开始</h1>
        <p class="hero-subtitle">海量学习笔记，助你快速提升知识储备</p>
        <a href="#" class="hero-button">立即开始</a>
    </section>

    <!-- 特色部分 -->
    <section class="features">
        <div class="feature-container">
            <div class="feature">
                <i class="feature-icon fa-solid fa-book-open"></i>
                <h3 class="feature-title">丰富笔记资源</h3>
                <p class="feature-description">涵盖多领域优质笔记，满足多样化学习需求</p>
            </div>
            <div class="feature">
                <i class="feature-icon fa-solid fa-users"></i>
                <h3 class="feature-title">社区交流互动</h3>
                <p class="feature-description">与其他学习者交流分享，共同进步成长</p>
            </div>
            <div class="feature">
                <i class="feature-icon fa-solid fa-mobile-screen-button"></i>
                <h3 class="feature-title">多端便捷使用</h3>
                <p class="feature-description">随时随地，通过各种设备访问学习笔记</p>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2025 学习笔记网站. 保留所有权利.</p>
    </footer>
</body>

</html>
    